<template>
  <div>
    <el-card style="width:98%;margin:30px auto;">
      <div clas="title" style="font-weight:bold;font-size:17px">海报管理</div>
      <div style="display: flex;justify-content: space-between">
        <!--插入和批量删除-->
        <div style="margin: 20px 2px">
          <el-button style="margin-right: 7px" type="primary" icon="el-icon-plus" circle @click="openPoster" title="添加"></el-button>
          <el-upload
            :action="'http://' + serverIp +':8880/poster/batchUpload'"
            :show-file-list="false"
            :on-success="handleFileUploadSuccess"
            multiple=""

            style="display: inline-block">
            <el-button type="primary" class="ml-5">上传文件 <i class="el-icon-top"></i></el-button>
          </el-upload>

          <el-button type="danger" @click="delBatch" icon="el-icon-delete" title="批量删除" slot="reference"
                     style="margin-left: 10px"></el-button>
        </div>
        <!--模糊查询-->
        <div style="margin: 20px 5px">
          <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"
                    v-model.trim="comment"></el-input>

          <el-button class="ml-5" type="primary" style="margin-left: 10px" @click="load">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </div>


      </div>


      <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
                @selection-change="handleSelectionChange" size="medium">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column
          prop="images"
          label="海报封面"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-image style="width: 100px;" :src="scope.row.images" :preview-src-list="[scope.row.images]">
            </el-image>

          </template>
        </el-table-column>
        <el-table-column prop="comment" label="海报描述" width="200px"></el-table-column>
        <el-table-column prop="type" label="海报类型" width="80"></el-table-column>
        <el-table-column prop="size" label="海报大小(kb)"></el-table-column>
        <el-table-column prop="explains" label="来源路径"></el-table-column>
        <el-table-column prop="sort" label="序号"></el-table-column>


        <el-table-column label="下载">
          <template slot-scope="scope">
            <el-button type="primary" @click="download(scope.row.images)">下载</el-button>
          </template>
        </el-table-column>
        <el-table-column label="启用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc"
                       @change="changeEnable(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">

          <template slot-scope="scope">

            <el-button type="primary" @click="edit(scope.row)" icon="el-icon-edit" circle></el-button>

            <el-button @click="del(scope.row.id)" title="删除"
                       slot="reference" type="danger" icon="el-icon-delete" circle
                       style="margin-left: 10px"></el-button>

          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!--弹窗-->

    <el-dialog
      title="更新海报"
      :visible.sync="dialogVisible">
      <el-form :model="form" label-width="120px">
        <el-form-item label="封面上传" >
          <el-upload
            :action="'http://' + serverIp +':8880/file/upload'"
            :show-file-list="false"
            :on-success="handleFileUploadSuccess"
            multiple=""

            style="display: inline-block">
            <el-button type="primary" class="ml-5">原图上传 <i class="el-icon-top"></i></el-button>
          </el-upload>
          <el-button type="primary" style="margin-left: 5px;margin-bottom: 10px" class="ml-5" @click="uploadPicture('flagImg')">裁剪上传 <i class="el-icon-top"></i></el-button>

            <div v-if="form.images !== ''">
              <img  :src="form.images" style='width:300px;height:150px' >
            </div>
            <div v-else class="upload-btn" style="height: 120px;" >
              <i class="el-icon-plus" style="font-size: 30px;"></i>
              <span>封面设置</span>
            </div>

          <input type="hidden" v-model="form.images" placeholder="请添加封面">
        </el-form-item>


        <el-form-item label="链接">
          <el-input v-model="form.images" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="海报描述">
          <el-input   type="textarea"  maxlength="40" v-model="form.comment" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件类型">
          <el-input v-model="form.type" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件大小(KB)">
          <el-input disabled v-model="form.size" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="海报顺序">
          <el-input v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>

    </el-dialog>


    <!--新增-->
    <el-dialog
      title="从网页上传海报"
      :visible.sync="addDialogVisible">
      <el-form :model="forms" label-width="120px"  :rules="rules" ref="forms">
        <el-form-item label="海报链接" prop="images">
          <el-input v-model="forms.images" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="海报描述" prop="comment">
          <el-input v-model="forms.comment" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="海报顺序" prop="sort">
          <el-input v-model="forms.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="海报来源" prop="explains">
          <el-input  value="网上链接" v-model="forms.explains='网上链接'" autocomplete="off" disabled ></el-input>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPoster">确 定</el-button>
      </div>

    </el-dialog>
    <!--图片裁剪-->
    <el-dialog
      title="裁切封面"
      :visible.sync="dialogVisible2"
      width="1200px"
      center
    >
      <upload-cropper
        :Name="cropperName"
        @uploadImgSuccess = "handleUploadSuccess1"
        ref="child">
      </upload-cropper>
    </el-dialog>



  </div>
</template>

<script>
import request from '../../utils/request'
import {serverIp} from "../../../public/config";
import {VueCropper} from 'vue-cropper'
import axios from 'axios'
import uploadCropper from "@/components/upload-cropper";
export default {
  name: "File",
  components: {
    VueCropper,
    uploadCropper
  },
  data() {
    return {
      imgVisible: false,

     //裁切图片参数
      cropperName:'',
      imgName: '',
      //控制是否在upload框里显示图片
      isShowImageUrl: false,
      imageUrl: '',
      dialogVisible2: false,
      // ========================

      dialogVisible1: false,
      rules: {
        images: [
          {required: true, message: '请填写链接', trigger: 'blur'},
          // {min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        comment: [
          {required: true, message: '请输入海报描述', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入序号', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 5 个字符', trigger: 'blur'}
        ],
      },
      forms:{},
      form: {},
      addDialogVisible:false,
      serverIp: serverIp,
      dialogImageUrl: '',
      dialogVisible: false,
      tableData: [],
      comment: '',
      multipleSelection: [],
      pageNum: 1,
      pageSize: 5,
      total: 0
    }
  },
  created() {
    this.load()
  },
  methods: {

    //封面设置

    handleUploadSuccess1 (data){

      this.form.images=data.data
      this.dialogVisible2=false

    },
    //封面设置
    uploadPicture(name){

      this.cropperName = name;
      this.dialogVisible2 = true;
    },
    //图片上传成功后
    handleUploadSuccess (data){

      // console.log(data)
      // this.dialogVisible2 = false;
      // this.form.images=data

      // this.dialogVisible2 = false;
    },
    //新增
    addPoster(){
      this.$refs['forms'].validate((valid) => {
        if (valid) {  // 表单校验合法

          request.post('/poster/addPoster',this.forms).then(res=>{
            if (res.code===200){
              this.$message({message: '添加成功', type: "success"})
              this.load()
              this.addDialogVisible = false
              this.forms={}
            } else{
              this.$message({message: '添加失败', type: "error"})
            }

          })
        }})

    },

    openPoster(){
      this.addDialogVisible=true
    },
    //更新
    save() {
      request.put('/poster/updatePoster', this.form).then(res => {
        if (res.code === 200) {
          this.$message({message: '更新成功', type: "success"})
          this.load()
          this.dialogVisible = false
        } else {
          this.$message({message: '更新失败', type: "success"})
        }
      })
    },

//编辑
    edit(row) {

      this.form = row
      this.dialogVisible = true
    },

    load() {
      request.get("/poster/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          comment:this.comment
        }
      }).then(res => {

        this.tableData = res.data.records
        this.total = res.data.total

      })
    },
    changeEnable(row) {

      request.put("/poster/updatePoster", row).then(res => {
        if (res.code === 200) {
          this.$message({message: '操作成功', type: "success"})
        }
      })
    },
    del(id) {
      this.$confirm('你确定要删除,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        request.delete("/poster/deletePoster/" + id).then(res => {
          if (res.code === 200) {
            this.$message({message: '删除成功', type: "success"})
            this.load()
          } else {
            this.$message({message: '删除失败', type: "error"})
          }
        })}).catch(() => {
        this.$message({
          message: '已取消删除',
          type: 'success'
        })
      })
    },
    handleSelectionChange(val) {

      this.multipleSelection = val

    },
    delBatch() {
      this.$confirm('你确定要批量删除,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'msgbox',
        type: 'warning'
      }).then(async () => {
        let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
        request.post("/poster/del/batch", ids).then(res => {
          if (res.code === 200) {
            this.$message({message: '批量删除成功', type: "success"})
            this.load()
          } else {
            this.$message({message: '批量删除失败', type: "error"})
          }

        })
      }).catch(() => {
        this.$message({
          message: '已取消删除',
          type: 'success'
        })
      })

    },
    reset() {
      this.comment = ""
      this.load()
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
    handleFileUploadSuccess1(res, file){
      // console.log(res)
      // this.form.images = res


      //上传成功后将图片地址赋值给裁剪框显示图片
      //res中包含的是action="http://106.13.150.219:8090/api/Common/CommonMethod/PostUploadImageList"
      //上面的接口返回的数据，成功/失败
      //包括服务器返回的信息，包含文件临时存放路径等信息
      //找到临时路径url

      //保存临时路径
      this.imageUrl = res
      //在upload框中显示图片
      this.isShowImageUrl = true
      //file中包含的是文件信息
      //关于上传的图片的具体信息，并且包含uid这个属性
      this.$nextTick(() => {

        this.option.img = URL.createObjectURL(file.raw);

        this.dialogVisible2 = true
      })

    },
    handleFileUploadSuccess(res) {
      console.log(res)
      this.form.images=res
      this.load()

      this.$message({message: '上传成功', type: "success"})

    },

    download(url) {
      window.open(url)
    },
    /*        preview(url) {
                window.open('https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(window.btoa((url))))
            },*/
    preview(index) {
      this.dialogImageUrl = index;
      this.dialogVisible1 = true;
    },
  }
}
</script>

<style >
.upload-list-cover{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 40px;
  align-items: center;
  background: rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity 1s;
}
.cover_icon {
  font-size: 30px;
}
.upload-btn{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 1px #cccccc;
}
.upload-btn:hover {
  border: 1px solid #69b7ed;
}
.upload-btn i{
  margin: 5px;
}

.el-dialog {
  width: 40%;
}


@media screen and (max-width: 440px) {
  .el-dialog {
    width: 90%;
  }

  @media only screen and (min-width:600px) and (max-width:1200px){
    .el-dialog {
      width: 60%;
    }
  }

  @media only screen and (min-width:441px) and (max-width:599px){
    .el-dialog {
      width: 80%;
    }
  }
}


</style>
